<template>
<!-- 登录 -->
  <div class="login_back">
    <div style="height: 100vh;">
      <img src="../../assets/login.jpg" style="width: 100vw;height: 100vh;">
    </div>
    <div class="login_div">
      <h3>大学生事务管理系统</h3>
      <el-form :model="loginParams" status-icon :rules="rules" ref="loginParams">
        <el-form-item prop="account" style="margin-bottom:35px">
          <el-input v-model="loginParams.account" placeholder="学号" autocomplete="off" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item prop="password" style="margin-bottom:35px">
          <el-input show-password v-model="loginParams.password" placeholder="密码" autocomplete="off" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="subMit('loginParams')">立即登录</el-button>
          <el-button type="warning" @click="register">注册</el-button>
          <div style="font-size: 12px;cursor: pointer;color: #727272;line-height: 30px" @click="forget">忘记密码?</div>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog title="注册" :visible.sync="dialogFormRegister" width="600px" :close-on-click-modal="false">
      <el-form :model="registerParams" :rules="registerRules" ref="registerParams" label-width="100px" size="small" style="width:500px">
        <el-form-item label="学号" prop="account">
          <el-input v-model="registerParams.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="registerParams.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerParams.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="margin-top:50px">
        <el-button @click="dialogFormRegister = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="addSubMit('registerParams')" size="mini">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="忘记密码" :visible.sync="dialogForgetPassword" width="600px" :close-on-click-modal="false">
      <el-form :model="forgetParams" :rules="forgetRules" ref="forgetParams" label-width="100px" size="small" style="width:500px">
        <el-form-item label="学号" prop="account">
          <el-input v-model="forgetParams.account"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="forgetParams.email"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="forgetParams.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="margin-top:50px">
        <el-button @click="dialogForgetPassword = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="forgetPasswordSubMit('forgetParams')" size="mini">确定重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginParams: {
        account: "",
        password: ""
      },
      rules: {
        account: [{ required: true, message: "请输入学号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },

      registerParams: {
        id:"",
        account: "",
        password:"",
        email: ""
      },
      registerRules: {
        account: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      },
      dialogFormRegister:false,
      dialogForgetPassword:false,
      forgetParams: {
        account: "",
        password:"",
        email: ""
      },
      forgetRules: {
        account: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      },
    };
  },
  methods: {
    subMit(formName){
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false;
        } else {
          this.axios({
            method: "post",
            url: "/user-info/login",
            data: this.loginParams,
          }).then((res) => {
            if (res.data.code === 200) {
              localStorage.setItem("account", res.data.data.account);
              localStorage.setItem("userId", res.data.data.id);
              localStorage.setItem("defaultActive","/homePage")
              this.$router.push("/admin/homePage");
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          });
        }
      });
    },

    register(){
      this.registerParams = {}
      this.dialogFormRegister = true
    },
    addSubMit(formName){
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }else {
          this.axios({
            method: "post",
            url: "/user-info/add",
            data: this.registerParams,
          }).then((res) => {
            if (res.data.code === 200) {
              this.dialogFormRegister = false;
              this.$message({message: "注册成功",type: "success"});
              this.list();
            } else {
              this.$message.error(res.data.message);
            }
          });
        }
      })
    },
    forgetPasswordSubMit(formName){
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }else {
          this.axios({
            method: "post",
            url: "/user-info/forget-password",
            data: this.forgetParams,
          }).then((res) => {
            if (res.data.code === 200) {
              this.dialogForgetPassword = false;
              this.$message({message: "修改成功",type: "success"});
              this.list();
            } else {
              this.$message.error(res.data.message);
            }
          });
        }
      })
    },
    forget(){
      this.forgetParams = {}
      this.dialogForgetPassword = true
    },
  },
};
</script>

<style>
.login_div {
  width: 260px;
  background-color: #ffffff;
  margin: 280px auto;
  padding: 15px 35px 10px 35px;
  border-radius: 10px;
  position: absolute;
  top: -50px;
  right: 300px;
}
.login_back {
  background-color: white;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

h3 {
  text-align: center;
  margin-bottom: 30px;
}
</style>
